<template>
    <div class="font-inter bg-gray-50 text-dark">
        <!-- 关于我们 -->
        <section id="about" class="py-16 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6">关于我们</h2>
                        <p class="text-gray-600 mb-6">
                            健康桥医疗平台致力于为患者提供便捷、高效的医疗服务，连接优质医疗资源，打造一站式医疗服务平台。
                        </p>
                        <p class="text-gray-600 mb-8">
                            我们拥有一支由经验丰富的医生、技术专家和服务团队组成的专业队伍，致力于为每一位患者提供最优质的医疗体验。
                        </p>

                        <div class="grid grid-cols-2 gap-6 mb-8">
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-user-md text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold">专业医生</h4>
                                    <p class="text-gray-500 text-sm">500+ 专家团队</p>
                                </div>
                            </div>

                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-hospital-o text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold">合作医院</h4>
                                    <p class="text-gray-500 text-sm">50+ 三甲医院</p>
                                </div>
                            </div>

                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-user text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold">服务患者</h4>
                                    <p class="text-gray-500 text-sm">100万+ 用户</p>
                                </div>
                            </div>

                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                                    <i class="fa fa-star text-primary text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold">满意度</h4>
                                    <p class="text-gray-500 text-sm">98% 好评率</p>
                                </div>
                            </div>
                        </div>

                        <button class="px-8 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
                            了解更多
                        </button>
                    </div>

                    <div class="relative">
                        <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl">
                            <img src="https://picsum.photos/800/600?random=7" alt="医院环境" class="w-full h-auto">
                        </div>
                        <div class="absolute -bottom-6 -right-6 w-40 h-40 bg-secondary/20 rounded-full -z-10 blur-3xl"></div>
                        <div class="absolute -top-6 -left-6 w-40 h-40 bg-primary/20 rounded-full -z-10 blur-3xl"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 页脚 -->
        <footer class="bg-dark text-white py-12">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    <div>
                        <div class="flex items-center mb-4">
                            <i class="fa fa-heartbeat text-primary text-3xl mr-2"></i>
                            <span class="text-xl font-bold">健康桥</span>
                        </div>
                        <p class="text-gray-400 mb-4">
                            连接优质医疗资源，提供便捷医疗服务。
                        </p>
                        <div class="flex space-x-4">
                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                <i class="fa fa-weixin text-xl"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                <i class="fa fa-weibo text-xl"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                <i class="fa fa-qq text-xl"></i>
                            </a>
                        </div>
                    </div>

                    <div>
                        <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                        <ul class="space-y-2">
                            <li><a href="/moxiang/homef" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                            <li><a href="/moxiang/departments" class="text-gray-400 hover:text-white transition-colors">科室导航</a></li>
                            <li><a href="/moxiang/doctors" class="text-gray-400 hover:text-white transition-colors">医生团队</a></li>
                            <li><a href="/moxiang/appointment" class="text-gray-400 hover:text-white transition-colors">在线预约</a></li>
                            <li><a href="/moxiang/about" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-semibold mb-4">服务支持</h4>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">预约指南</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">用户协议</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">投诉建议</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                        <ul class="space-y-2">
                            <li class="flex items-center">
                                <i class="fa fa-map-marker text-primary mr-2"></i>
                                <span class="text-gray-400">北京市海淀区中关村大街1号</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-phone text-primary mr-2"></i>
                                <span class="text-gray-400">400-123-4567</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-envelope text-primary mr-2"></i>
                                <span class="text-gray-400">service@healthbridge.com</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-clock-o text-primary mr-2"></i>
                                <span class="text-gray-400">周一至周日 8:00-20:00</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500 text-sm">
                    <p>© 2025 健康桥医疗平台 版权所有 | 京ICP备12345678号</p>
                </div>
            </div>
        </footer>
    </div>
</template>

<script setup>
// 组件逻辑（当前为静态页面，无交互逻辑）
</script>

<style scoped>
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    .hover-scale {
        transition: transform 0.3s ease;
    }
    .hover-scale:hover {
        transform: scale(1.02);
    }
}
</style>